<!--
 * @Description: 编辑门店
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2021-07-03 11:41:05
 * @LastEditTime: 2023-08-01 16:41:14
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->

<template>
  <div class="lb-store-list-edit">
    <top-nav :isBack="true" />
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="subForm"
        ref="subForm"
        :rules="subFormRules"
        label-width="130px"
      >
        <el-form-item label="门店头像" prop="cover">
          <lb-cover
            :fileList="subForm.cover"
            @selectedFiles="getCover($event, 'cover')"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 160 * 143</lb-tool-tips>
        </el-form-item>
        <el-form-item label="门店名称" prop="title">
          <el-input
            v-model="subForm.title"
            maxlength="15"
            show-word-limit
            placeholder="请输入门店名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属分类" prop="cate_id">
          <el-select
            v-model="subForm.cate_id"
            multiple
            collapse-tags
            filterable
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in base_cate"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店认证名称" prop="attestation">
          <el-input
            v-model="subForm.attestation"
            maxlength="20"
            show-word-limit
            placeholder="请输入门店认证名称"
          ></el-input>
          <lb-tool-tips>营业执照上的企业名称</lb-tool-tips>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="subForm.phone"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="营业执照" prop="business_license">
          <lb-cover
            :fileList="subForm.business_license"
            @selectedFiles="getCover($event, 'business_license')"
          ></lb-cover>
        </el-form-item>
        <el-form-item label="商家简介" prop="text">
          <el-input
            type="textarea"
            :rows="10"
            v-model="subForm.text"
            maxlength="300"
            show-word-limit
            resize="none"
            placeholder="请输入商家简介"
          ></el-input>
        </el-form-item>
        <el-form-item label="营业时间" prop="time">
          <el-time-select
            placeholder="开始时间"
            v-model="subForm.start_time"
            :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '24:00'
            }"
            style="width: 150px"
          ></el-time-select>
          <block>至{{ subForm | handleStartEndTime }}</block>
          <el-time-select
            placeholder="结束时间"
            v-model="subForm.end_time"
            :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '24:00'
            }"
            style="width: 150px"
          ></el-time-select>
          <lb-tool-tips
            >营业时间和入驻{{
              $t('action.attendantName')
            }}的工作时间设置一致</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="门店地址" prop="address">
          <el-input
            v-model="subForm.address"
            placeholder="请输入门店地址"
          ></el-input>
          <div class="mt-md mb-md">
            <el-input
              v-model="subForm.lng"
              placeholder="请输入门店经度"
            ></el-input>
          </div>
          <div>
            <el-input
              v-model="subForm.lat"
              placeholder="请输入门店纬度"
            ></el-input>
            <lb-button
              type="primary"
              class="getLocation"
              plain
              style="margin-left: 10px"
              @click="showMap = true"
              >获取经纬度</lb-button
            >
          </div>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo" v-preventReClick>{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="$router.back(-1)">{{
            $t('action.back')
          }}</lb-button>
        </el-form-item>
      </el-form>

      <lb-map
        :dialogVisible.sync="showMap"
        :address="subForm.address"
        @selectedLatLng="getLatLng"
      ></lb-map>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data () {
    let checkTime = (rule, value, callback) => {
      let { start_time: start, end_time: end } = this.subForm
      if (!start || !end) {
        callback(new Error(!start ? `请选择开始时间` : `请选择结束时间`))
      } else {
        callback()
      }
    }
    let checkAddress = (rule, value, callback) => {
      let isLng = /^[\-\+]?(0(\.\d{1,15})?|([1-9](\d)?)(\.\d{1,15})?|1[0-7]\d{1}(\.\d{1,15})?|180\.0{1,15})$/
      let isLat = /^[\-\+]?((0|([1-8]\d?))(\.\d{1,15})?|90(\.0{1,15})?)$/
      let { address, lat, lng } = this.subForm
      address = address ? address.replace(/(^\s*)|(\s*$)/g, '') : ''
      if (!address) {
        callback(new Error(`请输入门店地址`))
      } else if (!lng || !isLng.test(lng)) {
        let msg = !lng ? `请输入门店经度` : `请输入正确的经度`
        callback(new Error(msg))
      } else if (!lat || !isLat.test(lat)) {
        let msg = !lat ? `请输入门店纬度` : `请输入正确的纬度`
        callback(new Error(msg))
      } else {
        callback()
      }
    }
    return {
      showMap: false,
      base_cate: [],
      subForm: {
        id: 0,
        cover: [],
        title: '',
        cate_id: [],
        attestation: '',
        phone: '',
        text: '',
        business_license: [],
        start_time: '00:00',
        end_time: '23:59',
        address: '',
        lat: '',
        lng: ''
      },
      subFormRules: {
        cover: { required: true, type: 'array', message: '请上传门店头像', trigger: ['blur', 'change'] },
        title: { required: true, type: 'string', message: '请输入门店名称', trigger: 'blur' },
        attestation: { required: true, type: 'string', message: '请输入门店认证名称', trigger: 'blur' },
        phone: { required: true, validator: this.$reg.isAllPhone, text: '联系电话', trigger: 'blur' },
        text: { required: true, type: 'string', message: '请输入商家简介', trigger: 'blur' },
        business_license: { required: true, type: 'array', message: '请上传营业执照', trigger: ['blur', 'change'] },
        time: { required: true, validator: checkTime, trigger: 'blur' },
        address: { required: true, validator: checkAddress, trigger: ['blur', 'change'] }
      }
    }
  },
  async created () {
    let { id } = this.$route.query
    this.subForm.id = id
    await this.getBaseInfo()
  },
  methods: {
    async getBaseInfo () {
      let { id } = this.subForm
      let [cate, info] = await Promise.all([this.$api.store.cateSelect(), this.$api.store.storeInfo({ id })])
      this.base_cate = cate.data
      let { data } = info
      data.cover = [{ url: data.cover }]
      data.business_license = [{ url: data.business_license }]
      for (let i in this.subForm) {
        this.subForm[i] = data[i]
      }
    },
    getCover (img, key) {
      this.subForm[key] = img
    },
    getLatLng (latLng) {
      this.subForm.lat = latLng.lat
      this.subForm.lng = latLng.lng
    },
    /**
     * @name: 新增/编辑
     * @param {*}
     */
    submitFormInfo () {
      let flag = true
      this.$refs['subForm'].validate(valid => {
        if (!valid) flag = false
      })
      if (flag) {
        let subForm = JSON.parse(JSON.stringify(this.subForm))
        subForm.cover = subForm.cover[0].url
        subForm.business_license = subForm.business_license[0].url
        this.$api.store.storeUpdate(subForm).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t(subForm.id ? 'tips.successRev' : 'tips.successSub'))
            this.$router.back(-1)
          }
        })
      }
    }
  },
  filters: {
    handleStartEndTime (val) {
      let text = ''
      let { start_time: start, end_time: end } = val
      let day = moment(Date.now()).format('YYYY-MM-DD')
      if (start && end && (moment(`${day} ${end}`).unix() < moment(`${day} ${start}`).unix())) {
        text = '次日'
      }
      return text
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-store-list-edit {
  width: 100%;
  .el-form {
    width: 100%;
    .el-select,
    .el-input-number,
    .el-input {
      width: 300px;
    }
    .el-textarea {
      width: 600px;
    }
  }
}
</style>
